<template>
  <div class="login-container">
    <div class="neon-border">
      <h2>{{ isRegisterMode ? '注册' : '登录' }}</h2>
      <input type="text" v-model="username" placeholder="用户名" />
      <input type="password" v-model="password" placeholder="密码" />
      <!-- 注册模式下显示确认密码输入框 -->
      <input v-if="isRegisterMode" type="password" v-model="confirmPassword" placeholder="确认密码" />
      <button @click="isRegisterMode ? register() : login()">
        {{ isRegisterMode ? '注册' : '登录' }}
      </button>
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
      <!-- 切换登录和注册模式 -->
      <button @click="toggleMode">
        {{ isRegisterMode ? '已有账号？登录' : '没有账号？注册' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/authStore';

const router = useRouter();
const authStore = useAuthStore();

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const errorMessage = ref('');
const successMessage = ref('');
const isRegisterMode = ref(false);

const toggleMode = () => {
  isRegisterMode.value = !isRegisterMode.value;
  errorMessage.value = '';
  successMessage.value = '';
};

const login = async () => {
  if (!username.value || !password.value) {
    errorMessage.value = '用户名和密码不能为空';
    console.log('登录输入验证失败:', errorMessage.value); // 添加日志
    return;
  }

  console.log('登录输入的用户名:', username.value);
  console.log('登录输入的密码:', password.value);

  try {
    await authStore.login({ username: username.value, password: password.value });
    router.push('/home'); // 登录成功后跳转到首页
  } catch (error) {
    errorMessage.value = '用户名或密码错误';
    console.log('登录失败:', errorMessage.value); // 添加日志
    console.error('登录请求出错:', error);
  }
};

const register = async () => {
  // 表单验证
  if (!username.value || !password.value) {
    errorMessage.value = '用户名和密码不能为空';
    console.log('注册输入验证失败:', errorMessage.value); // 添加日志
    return;
  }

  if (password.value !== confirmPassword.value) {
    errorMessage.value = '两次输入的密码不一致';
    console.log('注册输入验证失败:', errorMessage.value); // 添加日志
    return;
  }

  // 创建新用户
  const newUser = {
    username: username.value,
    password: password.value,
    isAdmin: username.value === 'admin' // 只有用户名为admin的才是管理员
  };

  try {
    const isSuccess = await authStore.register(newUser);

    if (isSuccess) {
      successMessage.value = '注册成功！请前往登录';
      errorMessage.value = '';
      isRegisterMode.value = false; // 注册成功后切换到登录模式
      console.log('注册成功:', successMessage.value); // 添加日志
    } else {
      errorMessage.value = '用户名已存在';
      successMessage.value = '';
      console.log('注册失败:', errorMessage.value); // 添加日志
    }
  } catch (error) {
    errorMessage.value = '注册失败，请稍后重试';
    successMessage.value = '';
    console.log('注册失败:', errorMessage.value);
    console.error('注册请求出错:', error);
  }
};
</script>

<style scoped>
body {
  background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
}

.login-container {
  /* 修改为 flex 布局，确保子元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.neon-border {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.2);
  padding: 40px 30px;
  max-width: 350px;
  width: 100%;
  text-align: center;
  animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
  from {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.2);
  }
  to {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.7), 0 0 50px rgba(0, 255, 255, 0.5), 0 0 70px rgba(0, 255, 255, 0.4);
  }
}

h2 {
  margin-top: 0;
  color: #00FFFF;
  text-shadow: 0 0 10px #00FFFF;
}

input {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #00FFFF;
  background: transparent;
  color: #00FFFF;
  outline: none;
  transition: border-bottom 0.3s ease;
}

input:focus {
  border-bottom: 2px solid #FF00FF;
}

button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #00FFFF, #FF00FF);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 10px;
}

button:hover {
  background: linear-gradient(45deg, #FF00FF, #00FFFF);
}

.error-message {
  color: #FF0000;
  font-size: 14px;
  margin-bottom: 20px;
  text-shadow: 0 0 5px #FF0000;
}

.success-message {
  color: #00FF00;
  font-size: 14px;
  margin-bottom: 20px;
  text-shadow: 0 0 5px #00FF00;
}
</style>